<template>
  <div class="wrap">
    <div class="box">
      <input type="text" placeholder="请输入昵称"  v-model="username" />
      <p class="btn" @click="next">保存</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrap {
  height: 100vh;
  background: #fafafa;
  overflow: hidden;
}
.box{
    background: #fff;
    width: 8.8rem;
    padding: .4rem;
    margin: 15px auto;
    border-radius: .266667rem;
}
input {
  border: none;
  border-bottom: 1px solid #e5e5e5;
  width: 8.293333rem;
  margin: 1.066667rem auto;
  outline: none;
  height: 0.8rem;
}
.btn {
  width: 8.16rem;
  height: 1.066667rem;
  margin: 0 auto 0;
  background: #719BEF;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
  line-height: 1.066667rem;
  border-radius: 0.266667rem;
}
</style>
<script>
import { Dialog } from "vant";
import {updateUsername} from '@/utils/interface'
export default {
  data() {
      return {
        username:""
      }
  },
  methods: {
    next() {
      if(!this.username){
        Dialog.alert({
          message: "请输入昵称"
        });
        return false
      }
      Dialog.confirm({
        title: "提示",
        message: "确认修改？"
      })
        .then(() => {
          updateUsername({username:this.username}).then(res=>{
            if(res.data.code ==200){
               this.$router.go(-1)
            }

          })
         
        })
        .catch(() => {
           this.$router.go(-1)
        });
    }
  },
  created(){
    document.title="修改名称"
    this.username = this.$route.query.name
  }
};
</script>